<template>
	<view class="home-view" ref="home">
		<!-- <view class="status-bar"> -->
		<!-- 这里是状态栏 -->
		<!-- </view> -->
		<view class="header">
			<view class="logo">
				<view class="logo-left">
					<image :src="'../../static/icon/image_22.png'"  mode=""></image>
					<view class="app-name">
						| DESIGNER BAGS
					</view>
				</view>
			</view>
			<view class="search-view" @click="clickSearch" @change="serachChange">
				<u-search :placeholder="$t('common.search')" :disabled="disabled" :show-action="false" height="37">
				</u-search>
			</view>
		</view>
		<view class="swiper-view">
			<u-swiper :list="swiperImgArray" @change="e => current = e.current" @click="swiperClick" :autoplay="true"
				radius="0" height="232rpx" circular>
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperImgArray" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>

		<!-- <view class="menu-view">
			<view class="menu-item-view" v-for="(item,index) in menuArray" :key="index">
				<view class="img-view">
					<image :src="item.icon" @tap="footprints(item.id)"></image>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>

		<view class="content">
			<view class="hot-goods">
				<view class="title">
					{{ $t("home.popularGoods") }}
					<view class="more" @tap="lookMore">
						<text>{{ $t("home.seeMore") }}</text>
						<image src="../../static/icon/image_53.png" mode="" class="more-img"></image>
					</view>
				</view>
				<view class="commodity">
					<u-skeleton v-if="!hotGoodsList" style="margin-right: 20rpx;" rows="1" :rowsWidth="[150]" rowsHeight="105" :title="false" :loading="loading">
					</u-skeleton>
					<u-skeleton v-if="!hotGoodsList" style="margin-right: 20rpx;" rows="1" :rowsWidth="[150]" rowsHeight="105" :title="false" :loading="loading">
					</u-skeleton>
					<u-skeleton v-if="!hotGoodsList" rows="1" :rowsWidth="[150]" rowsHeight="105" :title="false" :loading="loading">
					</u-skeleton>
					<view class="commodity-item" v-for="item in hotGoodsList">
						<image class="commodity-item-img" v-if="item.morebagPublishPictures[0]" :src="item.morebagPublishPictures[0].picture" mode=""
							@tap="goGoodsDetils(item.id)"></image>
						<view class="commodity-item-name">{{item.commodity}}</view>
						<view class="commodity-item-info">
							<text
								class="commodity-item-info-price">$ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}</text>
							<text class="commodity-item-info-st">{{$t("home.low")}}</text>
							<text class="commodity-item-info-sum">{{$t("home.count")}}0</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hot-brand">
			<HotBrandItem :hotBrand="item" v-for="(item, index) in hotList" :key="index"></HotBrandItem>
		</view>

		<view class="tab-list">
			<view class="tab-item" @tap="clickTab(index)" :class="{active: tabCurrent == index}"
				v-for="(item, index) in goodsClassify" :key="item.id">
				{{item.name}}
			</view>
		</view> -->
		<!-- 热门品牌 -->
		<view class="hot-brand">
			<view class="hot-list">
				<view class="hot-item" :class="{activeBrand: brandCurrent == index && (brandCurrent||brandCurrent==0)}" @tap="checkBrand(index);selectBrand(item);" v-if="index < 4" v-for="(item, index) in hotList"
					:key="item.id">
					{{item.brandEngName}}
				</view>
			</view>

			<view class="other" :class="{activeBrand: brandCurrent == 999}" @tap="goDetail()">
				{{$t('home.all')}}
			</view>
		</view>

		<view class="footer-goods">
			<view class="screen-bar">
				<view class="sreen-left">
					<view class="all" @tap="all" :class="{active: screenCurrent === 0}">
						{{$t('home.all')}}
					</view>

					<view class="sold" @tap="sold" :class="{active: screenCurrent === 1}">
						{{$t('home.count')}}
					</view>

					<view class="on-sale" @tap="onSale" :class="{active: screenCurrent === 2}">
						{{$t('home.onSold')}}
					</view>
				</view>

				<view class="filter" @tap="showFilter">
					<view class="filter-desc">
						{{$t('home.filter')}}
					</view>
					<image class="screen-img" src="../../static/icon/image_88.png" mode=""></image>
				</view>
			</view>

			<!-- <view class="goods-list" v-if="changeGoodsList.length > 0">
				<waterfallsFlow  :list="changeGoodsList">
					<template v-slot:default="item">
						<GoodsItem :isClick="true" :goodsItem="item">
						</GoodsItem>
					</template>
				 </waterfallsFlow >
			</view> -->

			<view class="goods-list" v-if="changeGoodsList.length > 0">
					<u-waterfall v-model="changeGoodsList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<u-lazy-load threshold="-450" border-radius="10"  @tap="goCommDetail(item)" :image="item.morebagPublishPictures?item.morebagPublishPictures[0].picture:''" :index="index"></u-lazy-load>

									<view class="demo-title"  @tap="goCommDetail(item)">
										{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
									</view>
								<!-- 	<view class="demo-price">
										${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
									</view> -->
									<view class="demo-tag"  @tap="goCommDetail(item)">
										<view class="demo-tag-owner">
											${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
										</view>
										<view class="demo-tag-text"  v-if="(item.status==3 || item.status==10)">
											{{$t("GoodsItem.count")}}
										</view>
									</view>

									<view class="demo-shop">
										{{item.shop}}
									</view>
									<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
                  <u-lazy-load threshold="-450" border-radius="10"  @tap="goCommDetail(item)" :image="item.morebagPublishPictures?item.morebagPublishPictures[0].picture:''" :index="index"></u-lazy-load>

									<view class="demo-title"  @tap="goCommDetail(item)">
										{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
									</view>
									<!-- <view class="demo-price">
										${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
									</view> -->
									<view class="demo-tag"  @tap="goCommDetail(item)">
										<view class="demo-tag-owner">
											${{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
										</view>
										<view class="demo-tag-text"  v-if="(item.status==3 || item.status==10)">
											{{$t("GoodsItem.count")}}
										</view>
									</view>
								<!-- 	<view class="demo-tag">
										<view class="demo-tag-owner">
											自营
										</view>
										<view class="demo-tag-text">
											放心购
										</view>
									</view> -->
								<!-- 	<view class="demo-shop">
										{{item.shop}}
									</view> -->
									<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
								</view>
							</template>
						</u-waterfall>
						<u-loadmore bg-color="#fbfbfb" :nomoreText="$t('loadText.nomore')" :loadingText="$t('loadText.loading')" :loadmoreText="$t('loadText.loadmore')" :status="loadStatus" @loadmore="addRandomData" />
			</view>

			<view class="no-more" v-else-if="isLoadingOk && changeGoodsList.length <= 0">
				{{$t("home.noMore")}}
			</view>

			<!-- <view class="no-more" v-if="finished">
				{{$t("home.noMore")}}
			</view> -->

			<u-loading-icon v-else="loading || changeGoodsList.length <= 0"></u-loading-icon>

			<!-- <view class="goods-list" @scroll="scrolltolower" v-if="changeGoodsList.length > 0">
				<waterfall :col="2" :data="changeGoodsList">
					<template>
						<GoodsItem :isClick="true" :goodsItem="item" v-for="(item, index) in changeGoodsList"
							:key="index">
						</GoodsItem>
					</template>
				</waterfall>
			</view> -->

		</view>

		<u-popup :show="rightShow" mode="right" @close="rightShow=false" closeOnClickOverlay>
			<view class="side" :style="{height: phoneHeight}">
				<view class="filter-item">
					<view class="title-item">
						{{$t('language')=="zh"?"品牌":"Brand"}}
					</view>

					<view class="select-list">
						<view class="select-item" :class="{'select-active': selected.indexOf(subItem[0].id)!==-1}"
							@tap="selectActive(subItem[0].id)" v-for="subItem in brandArr" :key="subItem[0].id">
							{{$t('language')=="zh"?subItem[0].brandName:subItem[0].brandEngName?subItem[0].brandEngName:subItem[0].brandName}}
						</view>
					</view>
				</view>

				<view class="filter-item" v-if="seriesList">
					<view class="title-item">
						{{$t('language')=="zh"?"系列":"Series"}}
					</view>

					<view class="select-list">
						<view class="select-item" v-if="selected.indexOf(Number(seriesItem.brands))!==-1" :class="{'select-active': selected.indexOf(seriesItem.id)!==-1}"
							@tap="selectActive(seriesItem.id)" v-for="seriesItem in seriesList.children" :key="seriesItem.id">
							{{$t('language')=="zh"?seriesItem.brandName:seriesItem.brandEngName?seriesItem.brandEngName:seriesItem.brandName}}
						</view>
					</view>
				</view>

				<view class="filter-item" v-for="item in filterList" :key="item.id">
					<view class="title-item">
						{{$t('language')=="zh"?item.brandName:item.brandEngName?item.brandEngName:item.brandName}}
					</view>

					<view class="select-list">
						<view class="select-item" :class="{'select-active': selected.indexOf(subItem.id)!==-1}"
							@tap="selectActive(subItem.id)" v-for="subItem in item.children" :key="subItem.id">
							{{$t('language')=="zh"?subItem.brandName:subItem.brandEngName?subItem.brandEngName:subItem.brandName}}
						</view>
					</view>
				</view>

				<view class="filter-pla">

				</view>

				<view class="side-footer">
					<view class="reset-btn" @tap="selected = []">
						{{$t('home.reset')}}
					</view>

					<view class="confirm-btn" @tap="filterConfirm">
						{{$t('home.confirm')}}
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="brandShow" mode="right" @close="brandShow=false" closeOnClickOverlay>
			<view class="side" :style="{height: phoneHeight}">
				<u-index-list :index-list="indexList" v-if="indexList">
					<template>
						<u-index-item v-for="(item, index) in brandArr" :key="index">
							<!-- #ifndef APP-NVUE -->
							<u-index-anchor :text="indexList[index]" bgColor="#fff" height="20"></u-index-anchor>
							<!-- #endif -->

							<view class="list-cell" @tap="checkBrand(999);selectBrand(cell);" v-for="(cell, index1) in item"
								:key="cell.id">
								{{$t("language")=="zh"?cell.newBrandName:cell.brandEngName}}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</view>
		</u-popup>
	</view>
</template>

<script>
import commodityItem from '@/components/commodityItem.vue'
import search from '@/components/search.vue'
import HotBrandItem from '@/components/HotBrandItem/HotBrandItem'
import GoodsItem from '@/components/GoodsItem/GoodsItem'
import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";

import {
  getAllGoodsList,
  getSwiper,
  getHotList,
  getCategory,
  getInform,
  getCategoryGoods
} from "@/common/api.js" // ✅ 正确方法导入

	export default {
		components: {
			commodityItem,
			search,
			HotBrandItem,
			GoodsItem,
			waterfallsFlow
		},
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					// {
					// 	price: 35,
					// 	title: '',
					// 	shop: '',
					// 	image: '',
					// },

				],
				loadText: {
						loadmore: '轻轻上拉',
										loading: '努力加载中',
										nomore: '实在没有了'
				},
				loading: false,
				isLoadingOk: false,
				seriesList: null,
				brandStatus: null,
				pageSize: 10,
				total: null,
				enzh: "中",
				brandCurrent: null,
				brandArr: [],
				finished: false,
				brandItem: null,
				// indexList: [],
				brandShow: false,
				filterList: [],
				isBrand: false,
				phoneHeight: null,
				// loading: true,
				tabCurrent: 0,
				changeGoodsList: [],
				goodsList: [],
				brandFirst: true,
				rightShow: false,
				screenCurrent: 0,
				selected: [],
				pageNum: 1,
				goodsClassify: [{
						id: "1",
						name: this.$t("home.all")
					},
					{
						id: "2",
						name: this.$t("home.popularBrand")
					},
					{
						id: "3",
						name: this.$t("home.mostPopularBrand")
					},
					{
						id: "4",
						name: this.$t("home.luxuryBrand")
					}
				],
				menuArray: [{
						id: 1,
						icon: require('@/static/icon/image_35.png'),
						name: this.$t("home.footPrint")
					},
					{
						id: 2,
						icon: require('@/static/icon/image_36.png'),
						name: this.$t("home.auction")
					},
					{
						id: 3,
						icon: require('@/static/icon/image_38.png'),
						name: this.$t("home.wishList")
					},
					{
						id: 4,
						icon: require('@/static/icon/image_39.png'),
						name: this.$t("home.commodityRelease")
					}
				],
				hotList: [],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				serachValue: '',
				current: 0,
				swiperImgArray: [],
				swiperArray: [],
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				disabled: true,
				hotGoodsList: null,
				total:0
			}
		},
		mounted() {
			// #ifdef H5
			// window.addEventListener("scroll", this.scrolltolower, true);
			// #endif
			//如果你需要把这个页面当做子组件引入 需要加true 因为 ····  请看最后一张图片
		},
		methods: {
			// 下方商品跳转商品详情
			goCommDetail(item) {
				// console.log('-==-=-=-=',item)
				// console.log(123);
				uni.navigateTo({
					url:`/pages/commodityDetails/commodityDetails?id=${item.id}`
				})
			},
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.changeGoodsList.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.changeGoodsList[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
						remove(id) {
							this.$refs.uWaterfall.remove(id);
						},
						clear() {
							this.$refs.uWaterfall.clear();
						},
			goAnyDetail(item) {

			},
			// 跳转分类页面
			goDetail(){
				uni.navigateTo({
					url: "/pages/classification/classification"
				})
			},
			checkEnZh() {
				if(this.enzh == "中") {
					this.enzh = "en";
					this.$i18n.locale = this.enzh;
					this.tabBarChangeLang();
					return
				}

				if(this.enzh == "en") {
					this.enzh = "中";
					this.$i18n.locale = "zh";
					this.tabBarChangeLang();
					return
				}
			},
			scrolltolower() {
				let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				let clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
				if(scrollTop+clientHeight >= scrollHeight - 500 && this.loading) {
					console.log("滚动到底部");
					this.initGoodsList();
				}
			},
			modifData(arr) {
				// 修改数据品牌右侧显示内容
				const newArr = arr.map((item) => {
					item["newBrandName"] = item.brandEngName + "-" + item.brandName
					return item;
				})
				const tempArr = [];
				newArr.sort(function(s1, s2) {
					let x1 = s1.newBrandName.toUpperCase();
					let x2 = s2.newBrandName.toUpperCase();
					if (x1 < x2) {
						return -1;
					}
					if (x1 > x2) {
						return 1;
					}
					return 0;
				});
				newArr.forEach((subItem, index) => {
					let isAdd = false;
					tempArr.forEach((item, index) => {
						if (item[0].newBrandName[0].toUpperCase() === subItem.newBrandName[0]
							.toUpperCase()) {
							isAdd = true;
							tempArr[index].push(subItem);
						}
					})
					if (!isAdd && tempArr.length > 0) {
						tempArr.push([subItem])
					}
					if (tempArr.length <= 0) {
						tempArr.push([subItem])
					}
				})
				this.brandArr = tempArr;
				  this.brandArr  =this.brandArr .filter((item) => {
				            return item[0].brandEngName != "No brand";
				          });
				if (this.indexList.length > 0) {
					return
				}
				tempArr.forEach((item) => {
					this.indexList.push(item[0].newBrandName[0].toUpperCase());
				})
			},
			async filterConfirm() {
				this.isLoadingOk = false;
				this.loading = true;
				if(this.selected.length <= 0) {
					this.changeGoodsList = [];
					this.finished = false;
					this.pageNum = 1;
					this.initGoodsList();
					this.rightShow = false;
					this.screenCurrent = 0;
					return
				}
				this.finished = true;
				this.rightShow = false;
				this.screenCurrent = 0;
				const res = await getAllGoodsList({
					pageSize: 1000,
					classIds: this.selected.join(",")
				});

				this.loading = false;
				this.isLoadingOk = true;
				this.goodsList = res.rows;
				this.initChangeGoodsList();

			},
			selectActive(item) {
				if (this.selected.indexOf(item) !== -1) {
					this.selected.splice(this.selected.indexOf(item), 1); //取消
				} else {
					this.selected.push(item); //选中添加到数组里
				}
			},
			all() {
				if(this.selected.length > 0) {
					this.screenCurrent = 0;
					this.changeGoodsList = this.goodsList.filter((item) => {
						if (item.status != 0 && item.status != 4 && item.status != 10) {
							return item;
						}
					})
					return
				}
				if(this.brandItem) {
					this.brandStatus = null;
					this.screenCurrent = 0;
					this.selectBrand(this.brandItem);
					return
				}
				this.finished = false;
				this.screenCurrent = 0;
				this.pageNum = 1;
				this.goodsList = [];
				this.changeGoodsList = [];
				this.initGoodsList();

			},
			tabBarChangeLang: function() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.home')
				})

				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.cart')
				})
				// uni.setTabBarItem({
				// 	index: 2,
				// 	text: this.$t('tabbar.Sellidle')
				// })
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.news')
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabbar.my')
				})
			},
			// 选中品牌改变颜色
			checkBrand(index) {
				if(this.brandCurrent === index || this.brandCurrent === 999) {
					this.brandCurrent = null;
					this.brandItem = null;
					this.finished = false;
					this.brandFirst = false;
					this.screenCurrent = 0;
					this.pageNum = 1;
					this.goodsList = [];
					this.changeGoodsList = [];
					this.initGoodsList();
					return
				}
				this.brandCurrent = index;
				// this.brandFirst = true;
			},
			sold() {
				if(this.selected.length > 0) {
					this.screenCurrent = 1;
					this.changeGoodsList = this.goodsList.filter((item) => {
						if (item.status != 1 && item.status != 0 && item.status != 4 && item.status != 10) {
							return item;
						}
					})
					return
				}
				if(this.brandItem) {
					this.brandStatus = 3;
					this.screenCurrent = 1;
					this.selectBrand(this.brandItem);
					return
				}
				this.finished = false;
				this.screenCurrent = 1;
				this.pageNum = 1;
				this.goodsList = [];
				this.changeGoodsList = [];
				this.initGoodsList();

			},
			onSale() {
				if(this.selected.length > 0) {
					this.screenCurrent = 2;
					this.changeGoodsList = this.goodsList.filter((item) => {
						if (item.status == 1 && item.status != 0 && item.status != 4 && item.status != 10) {
							return item;
						}
					})
					return
				}
				if(this.brandItem) {
					this.brandStatus = 1;
					this.screenCurrent = 2;
					this.selectBrand(this.brandItem);
					return
				}
				this.finished = false;
				this.screenCurrent = 2;
				this.pageNum = 1;
				this.goodsList = [];
				this.changeGoodsList = [];
				this.initGoodsList();

			},
			showFilter() {
				this.rightShow = true;
			},
			// 跳转查看更多
			lookMore() {
				uni.navigateTo({
					url: "/pages/more/more"
				})
			},
			// 跳转商品详情
			goGoodsDetils(id) {
				uni.navigateTo({
					url: `/pages/commodityDetails/commodityDetails?id=${id}`
				})
			},
			// 跳转四项
			footprints(id) {
				if (id == "1") {
					uni.navigateTo({
						url: "/pages/footprints/footprints"
					})
				} else if (id == "4") {
					uni.navigateTo({
						url: "/pages/goodsReleased/goodsReleased"
					})
				} else if (id == "3") {
					uni.navigateTo({
						url: "/pages/wishGoods/wishGoods"
					})
				} else if (id == "2") {
					uni.navigateTo({
						url: "/pages/auctionRecord/auctionRecord"
					})
				}
			},
			// 轮播图点击事件
			swiperClick(index) {
				if (this.swiperArray[index].goodsId) {
					uni.navigateTo({
						url: `/pages/commodityDetails/commodityDetails?id=${this.swiperArray[index].goodsId}`
					})
				}

				if (this.swiperArray[index].newsId) {
					uni.navigateTo({
						url: `/pages/newsDetails/newsDetails?id=${this.swiperArray[index].newsId}`
					})
				}
			},
			//轮播图获取
			//轮播图获取
			async getSwiperImg() {
				const res = await getSwiper({
					parentId: 1
				});
				if (res.code == 200) {
					if (this.swiperImgArray.length <= 0) {
						res.rows.forEach(e => {
							this.swiperImgArray.push(e.url)
						})
					}
					this.swiperArray = res.rows;
				}
			},
			change() {
				console.log("home this._i18n.locale:", this._i18n.locale);
				if (this._i18n.locale == 'zh') {
					this._i18n.locale = 'en'
					return
				} else if (this._i18n.locale == 'en') {
					this._i18n.locale = 'zh'
					return
				};

			},
			serachChange(e) {
				console.log("搜索值:", e);
			},
			loadmore() {
				// for (let i = 0; i < 30; i++) {
				// 	this.indexList.push({
				// 		url: this.urls[uni.$u.random(0, this.urls.length - 1)]
				// 	})
				// }
			},
			clickSearch() {
        console.log(111)
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			clickTab(index) {
				this.tabCurrent = index;
				this.changeGoodsList = this.goodsList.map((item) => {
					if (this.tabCurrent == 0 && item) {
						return item;
					}
					if (item && item.whatGoods == this.tabCurrent) {
						return item;
					}
				});
			},
			initChangeGoodsList() {
				this.changeGoodsList = this.goodsList.filter((item) => {
					if (item.status != 0 && item.status != 4 && item.status != 10) {
						return item;
					}
				})
			},
			async initGoodsList() {
				if(this.finished) {
					return
				}
				this.loading = true;
				// // this.screenCurrent = 0;
				let res = null;
				if (this.screenCurrent == 0) {
					this.screenCurrent = 0;
					this.isLoadingOk = false;
					res = await getAllGoodsList({
						pageSize: 10,
						pageNum: this.pageNum
					});
					this.total = Math.ceil(res.total/10)
					if (res.code === 200) {
						this.pageNum++;
						this.loading = false;
						if(res.rows.length <= 0) this.finished = true;
						this.goodsList = [...this.goodsList, ...res.rows];
						this.initChangeGoodsList();
						this.isLoadingOk = true;
						uni.stopPullDownRefresh();
					}
				} else if (this.screenCurrent == 1) {
					this.isLoadingOk = false;
					this.loading = true;
					res = await getAllGoodsList({
						pageSize: 10,
						pageNum: this.pageNum,
						status: 3
					});
					if (res.code === 200) {
						this.pageNum++;
						this.loading = false;
						if(res.rows.length <= 0) this.finished = true;
						this.goodsList = [...this.goodsList, ...res.rows];
						this.initChangeGoodsList();
						this.isLoadingOk = true;
						uni.stopPullDownRefresh();
					}
				} else {
					this.isLoadingOk = false;
					this.loading = true;
					res = await getAllGoodsList({
						pageSize: 10,
						pageNum: this.pageNum,
						status: 1
					});
					if (res.code === 200) {
						this.pageNum++;
						this.loading = false;
						if(res.rows.length <= 0) this.finished = true;
						this.goodsList = [...this.goodsList, ...res.rows];
						this.initChangeGoodsList();
						this.isLoadingOk = true;
						uni.stopPullDownRefresh();
					}
				}
			},
			async initHotList() {
				const res = await getHotList({
					pageSize: 4,
					parentId: 1,
					isHot: 1
				});

				this.hotList = res.rows;
			},
			// async initHotGoodsList() {
			// 	const res = await getGoodsList({
			// 		pageSize: 8,
			// 		isHot: 1
			// 	});
			// 	if (res.code === 200) {
			// 		this.loading = false;
			// 		this.hotGoodsList = res.rows;
			// 	}
			// }
			async initFilter() {
				if (this.filterList.length > 0) {
					return
				}
				const res = await getCategory();
				const tempBrand = res.splice(0, 1);
				this.modifData(tempBrand[0].children);
				res.forEach((item) => {
					if (Array.isArray(item.children)) {
						this.filterList = [...this.filterList, ...item.children]
					}
				});
				this.seriesList = this.filterList.filter(item => item.brandName == "系列")[0];
				this.filterList = this.filterList.filter(item => item.brandName != "系列");
			},
			async selectBrand(item, isLoading) {
				this.brandShow = false;
				this.isLoadingOk = false;
				this.loading = true;

				if(!this.brandCurrent && this.brandCurrent !== 0) {
					return
				}

				if(!isLoading) {
					this.pageNum = 1;
					this.changeGoodsList = [];
					this.goodsList = [];
					this.finished = false;
				}

				if(this.finished) {
					return
				}

				this.brandItem = item;
				// uni.navigateTo({
				// 	url: `/pages/categoryShow/categoryShow?item=${encodeURIComponent(JSON.stringify(item))}`
				// })
				const res = await getCategoryGoods({
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					classificationId: item.id + ",",
					status: this.brandStatus
				})

				if(res.code == 200) {
					if(res.rows.length <= 0) this.finished = true;
					this.pageNum++;
					this.goodsList = [...this.goodsList, ...res.rows];
					this.initChangeGoodsList();
					this.isLoadingOk = true;
					this.loading = false;
				}
			},
			async initInform() {
				const res = await getInform({
					userId: uni.getStorageSync("userId")
				});

				if(res.code == 200) {
					const num = res.rows.filter(item => item.informStatus == 1).length;
					if(num > 0) {
						uni.setTabBarItem({
							index: 4,
							text: this.$t('tabbar.my'),
							iconPath: "../../static/icon/image_124.png",
							selectedIconPath: "../../static/icon/image_123.png"
						})
					} else {
						uni.setTabBarItem({
							index: 4,
							text: this.$t('tabbar.my'),
							iconPath: "../../static/icon/image_83.png",
							selectedIconPath: "../../static/icon/image_82.png"
						})
					}
				}
			}
		},
		onLoad() {
			//   if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
			//       window.location.href = "https://www.morebag.com.au/";
			//   }
			this.initGoodsList();
			// this.addRandomData();
			console.log('4.10,10:30')
		},
		onPullDownRefresh() {
			this.finished = false;
			this.screenCurrent = 0;
			this.pageNum = 1;
			this.goodsList = [];
			this.changeGoodsList = [];
			this.brandCurrent = null;
			this.initGoodsList();
			// setTimeout(function () {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		onReachBottom() {
			// #ifdef APP || H5
			console.log("到达底部");
			console.log(this.total,this.pageNum,'-------');
			if(this.total>0 && this.pageNum < this.total){
				this.loadStatus = 'loading';
				// 模拟数据加载
				setTimeout(() => {
					this.addRandomData();
					this.loadStatus = 'loadmore';
				}, 1000)
			}
			if(this.pageNum>this.total){
				this.loadStatus = 'nomore';
			}
			if(this.brandItem) {
				this.selectBrand(this.brandItem, true);
			} else {
				this.initGoodsList();
			}

			// #endif
		},
		onShow() {
			this.initInform();
			this.initHotList();
			this.initFilter();
			this.loadmore();
			this.getSwiperImg();
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = (res.screenHeight * (750 / res.windowWidth)) + 120 + "rpx";
				}
			});
			// this.initHotGoodsList();
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("home.title")
			});
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		text-align: center;
		width: 300rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.demo-tag {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.demo-tag-owner {
		display: inline;
		width: 50%;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 30rpx;
		color: #FF0000;
	}

	.demo-tag-text {
		line-height: 40rpx;
		background-color: #000;
		color: #fff;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 18rpx;
		margin-right: 10rpx;
		padding: 5rpx 10rpx;
	}

	.demo-price {
		display: inline;
		width: 50%;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 30rpx;
		color: #FF0000;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.header {
		position: fixed;
		// top: 120rpx;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 0 24rpx;
		z-index: 999;
		padding-top: var(--status-bar-height);
	}

	.list-cell {
		font-size: 20rpx;
		margin-top: 20rpx;
	}

	.u-index-list {
		margin-top: 50rpx;
		padding-left: 20rpx;
		font-size: 15rpx;
		color: #858585;
		text-align: left;
		height: 750rpx;
		// background-color: #FBFBFB;
		position: relative;
	}

	.u-index-item {
		background-color: #fff;
	}

	.u-index-anchor {
		position: relative;
		background-color: #fff;
	}

	.u-border-bottom {
		background-color: #fff;
	}

	.u-index-item {
		margin-bottom: 50rpx;
	}

	.no-more {
		text-align: center;
		font-size: 32rpx;
		padding: 10rpx;
		// font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
	}

	.logo {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logo-left {
			display: flex;
			align-items: center;
		}

		.zh-en {
			width: 50rpx;
			height: 50rpx;
			// padding: 5rpx 10rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 42rpx;
			color: #858585;
			box-sizing: border-box;
			border: #858585 3rpx solid;
		}

		image {
			width: 66rpx;
			height: 70rpx;
		}

		.app-name {
			color: #909090;
			font-family: PingFang SC;
			font-weight: regular;
			font-size: 24rpx;
		}
	}

	.u-loading-icon {
		padding: 30rpx 0;
	}

	.screen-bar {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		height: 88rpx;
		display: flex;
		align-items: center;
		color: #717184;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 26rpx;

		.sreen-left {
			width: 75%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 5rpx solid #858585;

			.all {
				margin-right: 88rpx;
			}

			.sold {
				margin-right: 88rpx;
			}
		}

		.filter {
			width: 20%;
			margin-left: 30rpx;
			display: flex;
			align-items: center;

			.screen-img {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.active {
		color: #FAAD67;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
	}

	// .status-bar {
	// 	height: var(--status-bar-height);
	// 	width: 100%;
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	background-color: #fff;
	// }

	.home-view {
		padding: 0px 24rpx;
		box-sizing: border-box;
		background-color: #FBFBFB;
	}

	// 搜索框
	.search-view {
		padding: 14rpx 0rpx;
		// margin-top: var(--status-bar-height);
	}

	// 轮播图区域
	.swiper-view {
		// margin: 14rpx 0px;
		/* #ifdef APP */
		margin-top: calc(100rpx + var(--status-bar-height) * 2);
		/* #endif */
		/* #ifdef H5 */
		margin-top: 190rpx;
		/* #endif */


	}

	// 四项菜单栏
	.menu-view {
		// margin: 20rpx 0px;
		margin-top: 20rpx;
		margin-bottom: 4rpx;
		height: 138rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fbfbfb;

		.menu-item-view {
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;

			.img-view {
				// border: 1px solid red;
				width: 78rpx;
				height: 78rpx;
				overflow: hidden;
			}

			.name {
				// border: 1px solid red;
				// margin-top: 8rpx;
				height: 40rpx;
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				line-height: normal;
				letter-spacing: 0rpx;
				text-align: center;
			}

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.content {
		background: #FFFFFF;
		box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 12rpx;
		padding-left: 20rpx;
	}

	.activeBrand {
		color: red !important;
	}

	.title {
		padding: 10rpx;
		display: flex;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		align-items: center;

		.more {
			margin-left: auto;
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
		}

		.icon {
			display: inline;
			height: 26rpx;
		}
	}

	.commodity {
		display: flex;
		width: 732rpx;
		overflow-x: scroll;
		align-items: center;

		.commodity-item:last-child {
			padding-right: 55rpx;
		}

		.commodity-item {
			flex: 0 0 286rpx;
			height: 254rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.commodity-item-img {
				margin-top: 20rpx;
				width: 266rpx;
				height: 180rpx;
				border: 2rpx solid #f1f1ff;
				border-radius: 10rpx;
			}

			.commodity-item-name {
				text-align: center;
				width: 266rpx;
				color: #000000;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: bold;
				overflow: hidden;
				text-align: center;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.commodity-item-info {
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;

				.commodity-item-info-price {
					// margin-left: 20rpx;
					// margin-right: 5rpx;
					color: #FF0000;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
				}

				.commodity-item-info-st {
					// margin-left: 15rpx;
					font-size: 18rpx;
					line-height: 40rpx;
				}

				.commodity-item-info-sum {
					font-size: 18rpx;
					line-height: 40rpx;
					// margin-left: auto;
					// margin-right: 18rpx;
				}
			}
		}
	}

	.more-img {
		width: 35rpx;
		height: 35rpx;
	}

	.more {
		display: flex;
		align-items: center;
	}

	.hot-brand {
		width: 100%;
		margin: 28rpx 0;
		height: 114rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #00000019;
		display: flex;
		align-items: center;

		.hot-list {
			width: 80%;
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;

			.hot-item {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				text-align: center;
			}
		}

		.other {
			width: 20%;
			text-align: center;
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
		}
	}

	.tab-list {
		overflow-x: scroll;
		display: flex;
		// align-items: center;
		margin-left: 30rpx;
		margin-top: 40rpx;
		margin-right: 40rpx;
		color: #717184;

		.tab-item {
			// width: 800rpx;
			height: 44rpx;
			box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			margin-right: 20rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 20rpx;
			text-align: center;
			line-height: 44rpx;
			padding: 0 20rpx;
		}
	}

	// .active {
	// 	background: #FAAD67;
	// 	color: #fff;
	// }

	.goods-list {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// flex-wrap: wrap;
		// flex-flow: column wrap;
		// columns: 2;
		// padding: 0rpx 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}

	.footer-goods {
		border-radius: 20rpx;
		background: #FBFBFB;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #00000019;
	}

	.filter-pla {
		height: 550rpx;
	}

	.side {
		width: 600rpx;
		// height: 100%;
		overflow-y: scroll;
		margin-top: 30rpx;
		margin-bottom: 150rpx;
		padding-bottom: 150rpx;

		.side-footer {
			position: fixed;
			bottom: 0;
			width: 600rpx;
			height: 88rpx;
			display: flex;
			align-items: center;

			.reset-btn {
				width: 50%;
				height: 100%;
				background: #FFFFFF;
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 30rpx;
				color: #858585;
				text-align: center;
				line-height: 88rpx;
			}

			.confirm-btn {
				width: 50%;
				height: 100%;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 30rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				background-color: #000000;
			}
		}

		.filter-item {
			padding-left: 40rpx;
			margin-top: 40rpx;

			.title-item {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 700;
				font-size: 30rpx;
				text-transform: uppercase;
			}

			.select-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.select-item {
					margin: 0 15rpx;
					margin-top: 20rpx;
					// width: 150rpx;
					padding: 0 40rpx;
					height: 60rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 700;
					font-size: 20rpx;
					color: #858585;
					text-align: center;
					line-height: 60rpx;
					background: #F6F6F6;
					border-radius: 40rpx;
				}
			}
		}
	}

	.select-active {
		background: #FAAD67 !important;
		color: #fff !important;
	}
</style>
